<template>
	<div id="home">
		<nar-bar class="home-nav">
			<div slot="center">购物街</div>
		</nar-bar>

		<scroll class="content" ref="sroll" :probe-type="3" @scroll="contentScroll">
			<home-swiper :banners="banners"></home-swiper>
			<recommend-view :recommends="recommends"></recommend-view>
			<feature-view></feature-view>
			<tab-control class="tab-control" :titles="['流行','新款','精选']" @tabClick="tabClick"></tab-control>
			<good-list :goods="goods[currentType].list"></good-list>
		</scroll>

		<back-top @click.native="backClick" v-show="isShowBackTop"/>
	</div>
</template>

<script>
	import HomeSwiper from "./childComps/HomeSwuiper.vue";
	import RecommendView from "./childComps/RecommendView.vue";
	import FeatureView from './childComps/FeatureView.vue'

	import NarBar from "components/common/navbar/NavBar.vue";
	import TabControl from 'components/content/tabControl/TabControl'
	import GoodList from 'components/content/goods/GoodsList.vue'
	import Scroll from 'components/common/scroll/Scroll'
	import BackTop from 'components/content/backTop/BackTop.vue'

	import {
		getHomeMultidata,
		getHomeGoods
	} from "network/home.js";


	export default {
		name: "Home",
		components: {
			HomeSwiper,
			RecommendView,
			FeatureView,
			NarBar,
			TabControl,
			GoodList,
			Scroll,
			BackTop
		},
		data() {
			return {
				banners: [],
				recommends: [],
				goods: {
					'pop': {
						page: 0,
						list: []
					},
					'new': {
						page: 0,
						list: []
					},
					'sell': {
						page: 0,
						list: []
					}
				},
				currentType: "pop",
				isShowBackTop: false
			}
		},
		created() {
			// 1.请求多个数据
			this.getHomeMultidata()

			// 2.请求商品数据
			this.getHomeGoods('pop')
			this.getHomeGoods('new')
			this.getHomeGoods('sell')
		},

		methods: {
			/* 
				事件监听的相关方法 
			 */
			tabClick(index) {
				switch (index) {
					case 0:
						this.currentType = "pop";
						break;
					case 1:
						this.currentType = "new";
						break;
					case 2:
						this.currentType = "sell";
						break;
				}
			},
			backClick() {
				this.$refs.sroll.scrollTo(0, 0);
			},
			contentScroll(position) {
				this.isShowBackTop = -position.y > 1000
				// console.log(position);
			},
			
			/* 
				网络请求相关的方法
			 */
			getHomeMultidata() {
				getHomeMultidata().then((res) => {
					// console.log(res);
					// this.result = res.data
					this.banners = res.data.banner.list;
					this.recommends = res.data.recommend.list;
					// console.log(this.banners, this.recommends);
				});
			},
			getHomeGoods(type) {
				const page = this.goods[type].page + 1
				getHomeGoods(type, page).then(res => {
					this.goods[type].list.push(...res.data.list)
					this.goods[type].page += 1
				})
			}
		}
	};
</script>

<style scoped>
	#home {
		padding-top: 44px;
		height: 100vh;
	}

	.home-nav {
		background-color: var(--color-tint);
		color: #fff;

		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9;
	}

	.tab-control {
		/* position: sticky; */
		top: 44px;
		z-index: 9;
	}

	.content {
		/* height: 300px; */
		overflow: hidden;

		position: absolute;
		top: 44px;
		bottom: 49px;
		left: 0;
		right: 0;
	}
	
	/* .content {
		height: calc(100% - 93px);
		overflow: hidden;
		margin-top: 44px;
	} */

	/*.content {
		overflow: hidden;
		
		position: absolute;
		height: calc(100% - 93px);
		margin-top: 45px;
	} */
</style>
